<template>
  <v-text-field
    :value="value"
    :label="config.label"
    :placeholder="$t('formConfig.placeholder') + config.label"
    :type="showpwd ? 'text' : 'password'"
    :rules="config.rules"
    :dense="config.dense"
    :append-icon="showpwd ? 'mdi-eye' : 'mdi-eye-off'"
    :solo-inverted="config.soloInverted"
    :solo="config.solo"
    :outlined="config.outlined"
    :single-line="config.singleLine"
    :hint="config.hint"
    counter
    autocomplete
    @input="valueInput"
    @change="$emit('valueChangeEmit', $attrs.value)"
    @click:append="showpwd = !showpwd"
  >
    <!-- name="input-10-1" -->
  </v-text-field>
</template>

<script>
export default {
  // base password component
  name: 'BasePasswordText',

  props: {
    // config item info
    configItem: { type: Object, default: () => {} },
    // current value
    value: { type: String, default: '' },
    // 隐藏信息
    hideDetail: { type: Boolean, default: false },
    // 不校验规则
    hideRules: { type: Boolean, default: false }
  },

  data() {
    return {
      // 重定向配置信息
      config: this.configItem,
      // 显示密码标识
      showpwd: false
    }
  },

  computed: {
    rules() {
      return this.config.rules
    }
  },

  methods: {
    valueInput(value) {
      this.$emit('input', value)
    },

    valueChange() {
      this.$emit('valueChangeEmit', this.value)
    }
  }
}
</script>

<style></style>
